* {
    padding: 0;
    margin: 0;
}

//版心
.container {
    width: 1200px;
    margin: auto;
    // background-color: pink;
}

//清除浮动
.clearfix::after {
    display: block;
    content: '';
    clear: both;
    height: 0;
}

.clearfix {
    zoom: 1;
}

//去除li样式
ul li {
    list-style: none;
}

//顶部
header {
    margin-top: 60px;

    //头部log
    .top {
        .leftlog {
            float: left;
            width: 350px;

            span {
                display: block;
                width: 100px;
                height: 100px;
                border-radius: 10px;
                font-size: 70px;
                background-color: rgb(255, 216, 0);
                color: rgb(56, 25, 10);
                text-align: center;
                line-height: 100px;
                float: left;
                margin-right: 20px;
            }

            h5 {
                font-size: 38px;
                font-family: '楷体';
                margin-top: 20px;
            }
        }

        //头部搜索
        .sousuo {
            float: left;
            width: 626px;
            margin: 25px auto;
            position: relative;

            input {
                width: 586px;
                height: 44px;
                border-radius: 66px;
                padding-left: 40px;
            }

            span {
                position: absolute;
                top: 14px;
                left: 14px;
                z-index: 100;
                font-size: 22px;
            }

            div {
                position: absolute;
                top: 1px;
                right: -2px;
                width: 155px;
                height: 45px;
                border: 0px;
                background-color: rgb(254, 228, 78);
                border-radius: 55px;
                text-align: center;
                line-height: 44px;
                cursor: pointer;
            }

        }

        //右侧图标
        .rightnav {
            float: left;
            margin-left: 20px;
            margin-top: 25px;

            ul {
                float: right;

                li {
                    float: left;
                    list-style: none;
                    margin-left: 10px;
                    text-align: center;

                    span {
                        font-size: 30px;
                        border: 0;
                        color: rgb(255, 116, 116);
                    }

                    div {
                        font-size: 10px;
                    }
                }
            }


        }
    }



}

//内容
main {
    margin-top: 40px;

    .nav {
        width: 100%;
        max-width: 1800px;
        background-color: rgb(67, 36, 12);
        margin: auto;

        ul {
            float: left;

            li {
                float: left;
                width: 280px;
                height: 60px;
                z-index: 1;
                line-height: 60px;
                color: rgb(255, 255, 255);
                font-size: 20px;
                text-align: center;

                &:hover {
                    background-color: rgb(254, 228, 78);
                }

                cursor: pointer;
            }

            .firstli {
                background-color: rgb(254, 228, 78);
            }


        }
    }

    //渲染内容
    .fenye {
        position: relative;
        ul {
            float: left;
            margin-right: 10px;   
            li {
                width: 280px;
                height: 50px;
                text-align: center;
                background-color: rgb(252, 249, 227);
                font-size: 17px;
                line-height: 50px;

                &:hover {
                    background-color: rgb(255, 255, 255);
                }

                div {
                    display: inline;

                    &:hover {
                        color: red;
                    }

                    cursor: pointer;
                }
            }
        }
        .erji{
            position: absolute;
           top: 0;
           left: 280px;
           z-index: 100;
           width: 280px;
           height: 450px;
           background-color: rgb(255, 255, 255);
           display: none;
            h5{
                width: 200px;
                margin: auto;
                border-bottom:solid 1px rgb(204, 195, 195);
                padding-bottom: 10px;
                margin-top: 20px;
                margin-bottom: 10px;
            }
            span{
                display: block;
                margin: auto;
                width: 200px;
                a{
                    text-decoration: none;
                    margin-left: 20px;
                    color: rgb(160, 164, 164);
                    line-height: 40px;
                    &:hover{
                        color: red;
                    }
                
                    }
            }
           }

        .swiper {
            width: 550px;
            height: 280px;
            float: left;
            margin-left: 5px;
            margin-top: 5px;
           

            img {
                width: 100%;
                height: 100%;
            }

            .swiper-scrollbar {
                display: none;
            }

            .swiper-button-prev:after,
            .swiper-button-next:after {
                font-size: 20px;
            }
        }

        .firstimg {
            width: 300px;
            float: left;
            height: 285px;
            margin-left: 10px;

        }

        .bootomimg {
            // background-color: skyblue;
            margin-top: 10px;
            float: left;
            width: 910px;
            display: flex;
            justify-content: space-evenly;

            img {
                width: 250px;
                height: 150px;
                // float: left;
                // // margin-top: 15px;
                // margin-right: 50px;
            }


        }
        .jiudiv{
            background-color: rgb(254,249,221);
            height: 50px;
            font-weight: 800;
            color: rgb(67,32,12);
            font-size: 25px;
            line-height: 50px;
            padding-left: 100px;
            width: 1100px;
         }
        .jiu{
            float: left;
            background-color: #fff;
            margin-top: 20px;
            li{
                float: left;
                width: 100px;
                margin-left: 20px;
                margin-right: 20px;
                background-color: #fff;
                cursor: pointer;
                border: 1px solid transparent;
                &:hover{
                    border-bottom: 1px solid  rgb(254, 228, 78);
                }
               
            }
           
        }
    }

    //小编精选
    .xiaobian {
        height: 75px;
        background-color: #fff;

        ul {
            float: left;

            li {
                float: left;
                font-size: 15px;
                margin-left: 20px;
                line-height: 75px;
                cursor: pointer;
                color: rgb(151, 122, 138);
            }

            li:nth-child(1) {
                color: rgb(164, 92, 12);
                font-size: 20px;

            }
        }
    }

    //商品列表
    .prolist {
        // background-color: rgb(225, 223, 223);
        ul {

            li {
                width: 280px;
                // height: 490px;
                float: left;
                margin-right: 10px;
                margin-left: 10px;
                margin-bottom: 20px;
                background-color: #fff;
                backdrop-filter: blur(3px);
                box-shadow: 1px 1px 1px 1px rgb(231, 228, 229);
                cursor: pointer;
                z-index: 10;
                position: relative;
                &:hover{
                    box-shadow: 3px 3px 3px 3px rgb(202, 201, 201);
                    // margin-top: -1px;
                }
                img {
                    width: 280px;
                    height: 280px;
                }


                div {
                    width: 245px;
                    font-size: 15px;
                    margin: auto;
                    color: rgb(157, 152, 147);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-bottom: 20px;
                }

                span:nth-child(3) {
                    background-color: rgb(255, 68, 0);
                    border-radius: 2px;
                    padding-right: 5px;
                    padding-left: 5px;
                    color: #fff;
                    margin-left: 18px;

                }

                span:nth-child(4) {
                    color: rgb(189, 185, 184);
                    float: right;
                    margin-right: 20px;
                }

                span:nth-child(5) {
                    font-size: 25px;
                    color: rgb(250, 88, 90);
                    display: block;

                }

                div:nth-child(5) {
                    margin-top: 20px;
                    font-size: 25px;
                    color: rgb(250, 88, 90);
                    display: block;

                    span {
                        font-size: 15px;
                        color: rgb(135, 122, 115);
                        margin-left: 10px;
                    }
                }

            }
            li:nth-child(4n){
                border-top: solid 1px transparent;
            }
        }
    }

    //查看跟多
    .chakan {
        width: 200px;
        height: 60px;
        background-color: rgb(254, 228, 78);
        border-radius: 30px;
        text-align: center;
        line-height: 60px;
        font-size: 20px;
        margin: auto;
        margin-bottom: 20px;
        cursor: pointer;
    }
    .chakanp{
        // width: 200px;
        text-align: center;
        color: rgb(90, 89, 89);
        font-size: 15px;
        margin: auto;
        display: none;
        margin-bottom: 20px;
    }
}

//底部
footer {
    max-width: 1800px;
    margin: auto;
    background-color: rgb(72,72,72);
    overflow: hidden;
    color: rgb(252,252,252);
    div {
        margin-top: 20px !important;

        span {
            margin-top: 20px;
            font-size: 100px !important;
            float: left;
            display: block;
            width: 100px;
            height: 100px;
            border-radius: 10px;
            font-size: 70px;
            background-color: rgb(255, 216, 0);
            color: rgb(56, 25, 10);
            text-align: center;
            line-height: 100px;
            float: left;
            margin-right: 20px;
        }

        div {
            float: left;
            margin-top: 30px;

            h5 {
                font-size: 40px;
                color: rgb(252, 252, 252);
            }

            p {
                width: 120px;
                margin: auto;
            }
        }

        div:nth-child(3) {
            margin-left: 100px;
            margin-top: 50px !important;
            font-size: 20px;
        }

    }
    ul{
        width: 600px;
        margin: auto;
        margin-top: 20px;
        li{
            float: left;
        }
    }

}
//返回顶部
.icon-huidaodingbu1{
    position: fixed;
    bottom: 20px;
    right: 50px;
    font-size: 50px;
    width: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: rgb(254,228,78);
    color: #fff;
    cursor: pointer;
    display: none;
}